<template>
	<view class="container pt20 pb40">
		<view class="header auto pb30">
			<view class="header-one dflex alc jcsb">
				<view class="fs44 fw900 color">{{ getData.name }}</view>
				<image src="../static/shz.png" mode="heightFix" v-if="status == 0"></image>
				<image src="../static/shcg.png" mode="heightFix" v-if="status == 1"></image>
				<image src="../static/shsb.png" mode="heightFix" v-if="status == 2"></image>
			</view>
			<!-- 地址 -->
			<view class="address dflex alc pl30 mt10">
				<image src="../../pagesB/images/location-gray.png" mode=""></image>
				<view class="fs28 gray ml6">郑州市金水区中州大道</view>
			</view>
			<view class="address dflex alc pl30 mt10">
				<image src="../../pagesB/images/time.png" mode=""></image>
				<view class="fs28 gray ml6">提交时间:2023-01-01</view>
			</view>
			<view class="center auto mt30 pb40">
				<!-- 标题 -->
				<view class="pt30 pl30"><subtitle title="人数汇总"></subtitle></view>
				<!-- tab栏 -->
				<view>
					<u-tabs
						:list="list"
						@click="handerTabs"
						:lineWidth="0"
						activeStyle="color:#4151db;fontWeight:bold;fontSize:28rpx"
						:lineHeight="0"
						inactiveStyle="color:#999"
					></u-tabs>
					<view class="pl30">
						<view
							v-for="(item, index) in arr"
							:key="item.cid"
							class="classes dflex alc pr30"
							style="margin-bottom: 70rpx;"
						>
							<view class="mr40 fs28 gray fw500">{{ item.classes }}</view>
							<u-line-progress
								:percentage="item.num"
								activeColor="#4151DB"
								:showText="false"
								height="10rpx"
							></u-line-progress>
							<view class="fs28 fw500 color">{{ item.num + '人' }}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="reason auto mt20" v-if="status == 2">失败原因：{{ getData.reason }}</view>
		<!-- 按钮区域 -->
		<view class="btns dflex jcse" v-if="status == 0">
			<view class="btn1 textc fw900 fs32 color666">撤销申请</view>
			<view class="btn2 textc fs32 fw900 white" @click="handerSet">修改</view>
		</view>
		<!-- 失败的时候的按钮 -->
		 <view class="setbtn dflex auto alc" v-if="status==2">
		 	<view class="auto textc fs32 white fw900">立即修改</view>
		 </view>
	</view>
</template>

<script>
import { indexList } from '../../pagesB/salesdetails/indexList.js';
import { list } from '../record/index.js';
export default {
	onLoad(options) {
		this.id = options.id;
		this.status = options.status;
		this.arr = indexList[0].arr; //默认进来加载一年级的
	},
	data() {
		return {
			id: '',
			status: '',
			list: indexList,
			arr: []
		};
	},
	computed: {
		//获取传来的数据 通过id查找数据
		getData() {
			return list.find(el => {
				return el.id == this.id;
			});
		}
	},
	methods: {
		//切换arr的数据
		handerTabs(event) {
			this.arr = event.arr;
		},
		//跳转到修改
		handerSet(){
			uni.navigateTo({
				url:'/pagesC/setreport/setreport'
			})
		}
	}
};
</script>

<style lang="scss" scoped>
page {
	background-color: #f2f5f9;
}
.header {
	width: 690rpx;

	background: linear-gradient(135deg, rgba(65, 81, 219, 0.3) 0%, rgba(65, 81, 219, 0) 100%);
	border-radius: 20rpx 20rpx 20rpx 20rpx;
	opacity: 1;
	.header-one {
		padding: 30rpx;
		padding-bottom: 0;
		image {
			width: 84rpx;
			height: 34rpx;
		}
	}
}
.address {
	image {
		width: 30rpx;
		height: 30rpx;
	}
}
.center {
	width: 650rpx;

	background: #ffffff;
	border-radius: 20rpx 20rpx 20rpx 20rpx;
}
.classes:last-child {
	margin-bottom: 0 !important;
}
::v-deep .u-line-progress__background {
	background-color: transparent;
}
.btns {
	width: 750rpx;
	height: 140rpx;
	background: #fff;
	margin-top: 64rpx;
	.btn1 {
		width: 330rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: #f2f5f9;
		border-radius: 10rpx 10rpx 10rpx 10rpx;
		opacity: 1;
	}
	.btn2 {
		width: 330rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(90deg, #8092eb 0%, #4151db 100%);
		border-radius: 10rpx 10rpx 10rpx 10rpx;
	}
}
.reason {
	width: 690rpx;
	background: #ffffff;
	border-radius: 20rpx;
	padding: 30rpx;
	font-size: 28rpx;
	font-family: PingFang SC-Medium, PingFang SC;
	font-weight: 500;
	color: #e62d32;
	line-height: 33rpx;
}
.setbtn{
	width: 750rpx;
	height: 140rpx;
	background: #FFFFFF;
	border-radius: 0rpx 0rpx 0rpx 0rpx;
	margin-top: 64rpx;
	&>view{
		width: 690rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(90deg, #8092EB 0%, #4151DB 100%);
		border-radius: 10rpx;

	}
}
</style>
